<template>
  <div class="post-list">
    <div v-for="post in list" :key="post._id" class="card mb-3 shadow p-1">
        <div class="card-body">
          <h4>
            <router-link class="text-decoration-none" :to="`/post/${post._id}`">{{ post.title }}</router-link>
          </h4>
          <div class="my-3 align-items-center">
            <div class="row">
              <img :src="post.image && post.image.url" class="col-3" />
              <div class="col-9">
                {{ post.excerpt }}
              </div>
            </div>
          </div>
          <span class="text-muted">{{ post.createdAt }}</span>
        </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PostProps } from '../store'

export default defineComponent({
  props: {
    list: {
      required: true,
      type: Array as PropType<PostProps[]>
    }
  }
})
</script>

<style scoped>
.post-list a {
  color: #000;
}
.post-list a:hover {
  color: aqua
}
</style>
